<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘抢购</title>
    <link rel="stylesheet" href="sty.css">
</head>
<body>
<div class="container">
    <div class="qiang-inner">
        <div class="qiang-nr">
            <img src="./logo.png" alt="" class="qiang-logo"> <span class="shijian">距结束</span>
                        <span class="bian">
                            <span class="hour">00</span>
                            :
                            <span class="min" id="min"></span>
                            :
                            <span class="miao" id="miao"></span></span>
            <div class="mo">
                <span class="huan" id="btn">换一换</span>
                <span class="more">更多></span>
            </div>
        </div>
        <div class="qiang-nr2">



        </div>
    </div>
</div>
<script>
    var page = 1;

    document.querySelector("#btn").addEventListener('click',function () {
        page++;
        if (page == 5){
            page = 1
        }
        document.querySelector(".qiang-nr2").innerHTML="";
        loadXMLDoc()
    })


    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest){
            xmlhttp= new XMLHttpRequest();
        }else {
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange= function () {
            if (xmlhttp.readyState==4 && xmlhttp.status == 200) {
                var json = xmlhttp.responseText;
                json = JSON.parse(json);
                for(let i=0;i<json.shop.length;i++){
                    var img=document.createElement("img");
                    img.src= json.shop[i].pic;
                    img.classList.add("tu1");

                    var xia=document.createElement("div");
                    xia.classList.add("xiang");

                    var h3=document.createElement("h4");
                    h3.innerHTML = json.shop[i].title;
                    var p=document.createElement("p");
                    p.innerHTML = json.shop[i].jie;
                    var pr=document.createElement("div");
                    pr.classList.add("progress");
                    var prr=document.createElement("div");
                    prr.classList.add("progress-bar");
                    prr.style.width=json.shop[i].pe;

                    var be=document.createElement("div");
                    be.classList.add("desc");
                    var span=document.createElement("span");
                    span.classList.add("percentage");
                    span.innerHTML=json.shop[i].pe;
                    var spann=document.createElement("span");
                    spann.classList.add("letter");
                    spann.innerHTML=json.shop[i].le;
                    var ex=document.createElement("div");
                    ex.classList.add("extra");
                    var cur=document.createElement("div");
                    cur.classList.add("cur");
                    cur.innerHTML = json.shop[i].jia;
                    var pi=document.createElement("div");
                    pi.classList.add("price");
                    pi.innerHTML = json.shop[i].jjia;




                    var div=document.createElement("div");
                    div.classList.add("yikuai")

                    div.appendChild(img);
                    div.appendChild(xia);
                    xia.appendChild(h3);
                    xia.appendChild(p);
                    xia.appendChild(pr);
                    pr.appendChild(prr);
                    xia.appendChild(be);
                    xia.appendChild(ex);
                    be.appendChild(span);
                    be.appendChild(spann);
                    ex.appendChild(cur);
                    ex.appendChild(pi);


                    document.querySelector(".qiang-nr2").appendChild(div)
                }
            }
        }
        xmlhttp.open("GET",page + ".json", true);
        xmlhttp.send();
    }

    loadXMLDoc();
</script>
<script>
    var daoji = document.querySelector(".qiang-nr .shijian .bian .min")
    var daoj = document.querySelector(".qiang-nr .shijian .bian .miao")
    var min = 14;
    var miao = 60;
    setInterval(function () {
        miao--;
        if (miao < 10) {
            miao = "0" + miao
        }
        document.getElementById("miao").innerHTML = miao;
        if (miao == 00) {
            miao = 60;
            min--;
            if (min < 10) {
                min = "0" + min
            }
            if (min == 0) {
                min = 14;
            }
        }
        document.getElementById("min").innerHTML = min;
    }, 1000)
</script>

</body>
</html>